<template>
  <div class="relevance-container">
    <div class="top">
      <el-row type="flex" justify="left">
        <div class="top_item">
          <label class="label">企业名称</label>
          <el-input v-model="partCompany" type="text" placeholder="请输入企业名称" class="input" clearable />
        </div>
        <div class="top_item">
          <el-button type="primary" icon="el-icon-search" @click="getPayInfo">查询</el-button>
          <el-button @click="reset"> 重置</el-button>
        </div>
      </el-row>
      <el-row type="flex" justify="left">
        <el-table
          :cell-style="{'text-align':'center'}"
          :header-cell-style="{'text-align':'center'}"
          max-height="400px"
          :data="payInfoData"
        >
          <el-table-column v-if="false" prop="payInfoId" label="编号" />
          <el-table-column prop="ind" label="序号" :formatter="handleIndex" />
          <el-table-column prop="companyName" label="企业名称" />
          <el-table-column prop="paySum" label="应缴金额" />
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="showCheckDialog(scope.row)">平账</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row type="flex" justify="center">
        <el-pagination
          :page-size="payInfoPageSize"
          :current-page="payInfoCurrentPage"
          :page-sizes="[5,10,20,50]"
          layout="sizes,prev,pager,next,total"
          :total="payInfoTotalCount"
          @size-change="handlePayInfoSizechange"
          @current-change="handlePayInfoCurrentchange"
        />
      </el-row>
      <el-dialog title="平账" :visible.sync="checkDialog">
        <span>应缴余额: {{ restPaySum }}</span>
        <hr height="1px">
        <el-table
          :cell-style="{'text-align':'center'}"
          :header-cell-style="{'text-align':'center'}"
          max-height="400px"
          :data="transInfoData"
        >
          <el-table-column v-if="false" prop="transferId" label="交易编号" />
          <el-table-column prop="ind" label="序号" :formatter="handleTransIndex" />
          <el-table-column prop="oppBankAccountName" label="对方户名" />
          <el-table-column prop="oppBankAccount" label="对方账号" />
          <el-table-column prop="amt" label="交易金额" />
          <el-table-column prop="transTime" label="交易时间" :formatter="handleDate" />
          <el-table-column prop="abs" label="备注" />
          <el-table-column label="操作" fixed="right" min-width="100px">
            <template slot-scope="scope">
              <el-checkbox @change="handleRelevantTransListChange($event,scope.row)">关联</el-checkbox>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="transPageSize"
            :current-page="transCurrentPage"
            :page-sizes="[5,10,20,50]"
            layout="sizes,prev,pager,next,total"
            :total="transTotalCount"
            @size-change="handleTransInfoSizechange"
            @current-change="handleTransInfoCurrentchange"
          />
        </el-row>
        <el-row type="flex" justify="center" style="margin-top: 20px">
          <el-button type="primary" :disabled="relevantTransList === null || relevantTransList.length === 0 " @click="relevanceCheck()">确定</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import payApi from '@/api/pay.js'
import compApi from '@/api/compApi.js'
import transApi from '@/api/trans.js'
import store from '@/store'
import { MessageBox } from 'element-ui'
import { getUserInfo } from '@/api/user.js'
import router from '@/router'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      partCompany: '',
      payInfoData: [],
      transInfoData: [],
      checkDialog: false,
      payInfo: null,
      restPaySum: 0,
      payInfoCurrentPage: 1,
      payInfoTotalCount: 0,
      payInfoPageSize: 5,
      transCurrentPage: 1,
      transTotalCount: 0,
      transPageSize: 5,
      relevantTransList: []
    }
  },
  created() {
    this.getPayInfo()
  },
  mounted() {
  },
  methods: {
    reset: function() {
      this.partCompany = ''
    },
    getPayInfo: function() {
      this.currentPage = 1
      this.getPayListInfo(this.currentPage)
    },
    getPayListInfo: function(cp) {
      const params = {
        partCompany: this.partCompany,
        pageSize: this.payInfoPageSize,
        currentPage: cp,
        status: '5',
        isInserted: 'Y',
        insertTime: ''
      }
      payApi.searchPayInfoList(params).then(res => {
        if (res.retCode === '0000') {
          this.payInfoData = res.list
          this.payInfoTotalCount = res.pageInfo.totalSize
        } else {
          this.$message.error('获取缴费列表信息失败，原因' + res.retMsg)
        }
      })
    },
    getTransListInfo: function() {
      const params = {
        pageSize: this.transPageSize,
        currentPage: this.transCurrentPage
      }
      transApi.searchUncheckedTransList(params).then(res => {
        if (res.retCode === '0000') {
          console.log(res.list)
          this.transInfoData = res.list
          this.transTotalCount = res.pageInfo.totalSize
          this.checkDialog = true
        } else {
          this.$message.error('获取交易信息失败，原因' + res.retMsg)
        }
      })
    },
    relevanceCheck: function() {
      const params = {
        payInfoId: this.payInfo.payInfoId,
        transferIdList: JSON.stringify(this.relevantTransList),
        flag: '1'
      }
      this.$confirm('确定进行关联?', '确认消息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        compApi.relevanceCheck(params).then(res => {
          if (res.retCode === '0000') {
            this.$message.success('人工平账成功')
            this.getPayListInfo(1)
            this.checkDialog = false
          } else {
            this.$message.error('人工平账失败，原因' + res.retMsg)
          }
        })
      }).catch(() => {
        this.$message.info('取消人工平账')
      })
    },
    showCheckDialog: function(payInfo) {
      getUserInfo().then(res => {
        if (res.userId === 'guest' || !getToken()) {
          MessageBox.alert('用户登录已过期，请重新登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              store.dispatch('user/logout').then(() => {
                router.push('/login')
              })
            }
          })
        } else {
          const params = {
            payInfoId: payInfo.payInfoId
          }
          compApi.getSumNeetToPay(params).then(res => {
            if (res.retCode === '0000') {
              console.log(payInfo)
              this.payInfo = payInfo
              this.transInfoData = []
              this.transCurrentPage = 1
              this.restPaySum = res.sumNeedToPay
              this.relevantTransList = []
              this.getTransListInfo()
            } else {
              this.$message.error('获取应缴金额失败，原因' + res.retMsg)
            }
          })
        }
      })
    },
    handleIndex: function(row, column, cellValue, index) {
      return (index + 1) + (this.payInfoCurrentPage - 1) * this.payInfoPageSize
    },
    handleTransIndex: function(row, column, cellValue, index) {
      return (index + 1) + (this.transCurrentPage - 1) * this.transPageSize
    },
    handleDate: function(row, column, cellValue, index) {
      return cellValue.substr(0, 10)
    },
    handlePayInfoSizechange: function(val) {
      this.payInfoPageSize = val
      this.getPayListInfo(this.currentPage)
    },
    handlePayInfoCurrentchange: function(val) {
      this.payInfoCurrentPage = val
      this.getPayListInfo(this.payInfoCurrentPage)
    },
    handleTransInfoSizechange: function(val) {
      this.transPageSize = val
      this.getTransListInfo()
    },
    handleTransInfoCurrentchange: function(val) {
      this.transCurrentPage = val
      this.getTransListInfo()
    },
    handleRelevantTransListChange: function(val, transInfo) {
      if (val) {
        this.relevantTransList.push(transInfo.transferId)
        this.restPaySum -= transInfo.amt
      } else {
        const index = this.relevantTransList.indexOf(transInfo.transferId)
        if (index !== -1) {
          this.relevantTransList.splice(index, 1)
          this.restPaySum += transInfo.amt
        }
      }
      console.log(this.relevantTransList)
    }
  }
}
</script>
<style>
   /* 顶部条件筛选栏*/
  .top {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    border:1px solid  rgba(0,0,0,0.2);
    box-shadow:1px 1px 2px 0px rgba(0,0,0,0.2);
  }
  .top_item {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
  }
  .top_item_right {
     position: absolute;
     right: 2%;
  }
  .top_item label {
    width: auto;
    min-width: fit-content;
    margin:10px;
  }
  .top_item input {
    width: auto;
    min-width: fit-content;
  }
</style>
<style lang="scss" scoped>
.relevance {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
